<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#msg{
				/* display: none; */
				color:red;
			}
		</style>
	</head>
	<body>
		<div>
			<span>请输入手机号:</span>
			<input type="text" id="phone">
			<span id="msg"></span>
		</div>
		<script>
			//实现代码
            var oInput = document.querySelector('#phone');
            var oSpan = document.querySelector('#msg');

            oInput.onfocus = function(){
                // 1. 清空文本框
                this.value = '';
                // 2. 将span中的内容设置为空
                oSpan.innerHTML = '';
            }

            oInput.onblur = function(){
                var reg = /^1[3456789]\d{9}$/;
                if(reg.test(this.value)){
                    // 1. 内容显示合法手机号
                    oSpan.innerHTML = '合法手机号';
                    // 2. span颜色设置为绿色
                    oSpan.style.color = 'green';
                }else{
                    // 1. 内容显示不合法手机号
                    oSpan.innerHTML = '不合法手机号';
                    // 2. span颜色设置为红色
                    oSpan.style.color = 'red';
                }
            }
		</script>
	</body>
</html>